<template>
	<basic-container>
		<el-form :model="form" ref="form" @keyup.enter.native="dataFormSubmit()" label-width="110px"  class="demo-form-inline">

      <el-form-item label="账号" prop="agreementNo">
      			<el-input v-model="agreementNo" placeholder="账号" disabled="disabled"></el-input>
      		</el-form-item>

			<el-form-item label="客户简称" prop="customerJcName">
				<el-input v-model="customerJcName" placeholder="客户简称" disabled="disabled"></el-input>
			</el-form-item>


        <el-form-item label="协议主题" propprop="name" :rules="[{required: true,message: '请输入协议主题'},{min: 0,max:255,message: '请输入协议主题'}]">
        	<el-input v-model="form.name" placeholder="协议主题"></el-input>
        </el-form-item>
      <el-form-item label="协议类型"  prop="type" :rules="[{required: true,message: '请输入协议类型'},{min: 0,max:255,message: '请输入协议类型'}]">
        <el-select v-model="form.type"  placeholder="请选择" style="width: 180px;">
            <el-option
              v-for="item in agreementtype"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
      </el-form-item>
        <el-form-item label="协议单号"   prop="no" :rules="[{required: true,message: '请输入协议单号'},{min: 0,max:255,message: '请输入协议单号'}]">
        	<el-input v-model="form.no" placeholder="协议单号"></el-input>
        </el-form-item>



			<el-form-item label="签约时间" prop="qyTime" :rules="[{required: true,message: '请选择签约时间'}]">
				<el-date-picker v-model="form.qyTime" type="date" placeholder="签约时间" value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="有效期至" prop="effective" :rules="[{required: true,message: '请选择有效期'}]">
				<el-date-picker v-model="form.effective"   type="date" placeholder="有效期" value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-form-item>

		<!-- 	<el-form-item label="佣金" prop="money" :rules="[{required: true,message: '请输入佣金'}]">
				<el-input type="number" v-model="form.money" placeholder="佣金"></el-input>
			</el-form-item> -->



			<el-form-item label="佣金信息保密" prop="commissionInformation" :rules="[{required: true,message: '请输入'}]">
				<el-radio-group v-model="form.commissionInformation">
					<el-radio label="1">是</el-radio>
					<el-radio label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="客户签约人" prop="khSigning" :rules="[{required: true,message: '请输入客户签约人'},{min: 0,max:11,message: '请输入客户签约人'}]">
				<el-input v-model="form.khSigning" placeholder="客户签约人"></el-input>
			</el-form-item>
			<el-form-item label="本司签约人" prop="bsSigning" :rules="[{required: true,message: '请输入本司签约人'},{min: 0,max:255,message: '请输入本司签约人'}]">
				<el-input v-model="form.bsSigning" placeholder="本司签约人"></el-input>
			</el-form-item>
			<!--  <el-form-item label="房间号" prop="roomNumber" :rules="[{required: true,message: '请输入房间号'},{min: 0,max:25,message: '请输入房间号'}]">
	    <el-input   v-model="form.roomNumber" placeholder="房间号"></el-input>
	  </el-form-item> -->
			<!-- <el-form-item label="使用固定房价折扣" prop="fixedDiscount" :rules="[{required: true,message: '请选择'}]">
				<el-radio-group v-model="form.fixedDiscount">
					<el-radio label="1">是</el-radio>
					<el-radio label="0">否</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="房价固定折扣值" prop="discount" v-if="form.fixedDiscount==1 " :rules="[{required: true,message: '请输入房价固定折扣值'},{min: 0,max:255,message: '请输入房价固定折扣值'}]">
				<el-input type="number" v-model="form.discount" placeholder="房价固定折扣值"></el-input>
			</el-form-item> -->
			<el-form-item label="备注" prop="remake">
				<el-input v-model="form.remake" placeholder="备注"></el-input>
			</el-form-item>
			<el-form-item label="内容" prop="content">
				<el-input type="textarea" v-model="form.content" placeholder="内容"></el-input>
			</el-form-item>


		</el-form>
		<div class="el-dialog__footer">
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelReturn()">取 消</el-button>
				<el-button type="primary" @click="dataFormSubmit()">保 存</el-button>
			</div>
		</div>
	</basic-container>
</template>

<script>
	export default {
		name: "adddetailscustomer",
		props: {
			cancelReturn: {
				type: Function
			},
			id: {
				type: String
			},
			agreementNo: {
				type: String
			},
			customerJcName: {
				type: String
			},
			mainid: {
				type: String
			}
		},
		data() {
			return {
        agreementtype:[],
				visible: true,
				options: [{
					value: '0',
					label: '元'
				}, {
					value: '1',
					label: '%'
				}],
				form: {
					customerJcName: undefined,
					agreementNo: undefined,
					id: undefined,
					agreementId: undefined,
					type: undefined,
					name: undefined,
					khSigning: undefined,
					bsSigning: undefined,
					roomNumber: undefined,
					no: undefined,
					qyTime: undefined,
					effective: undefined,
					discount: undefined,
					operation: undefined,
					updateTime: undefined,
					createUserId: undefined,
					breakfast: undefined,
					remake: undefined,
					roomType: undefined,
					commission: undefined,
					money: undefined,
					commissionInformation: undefined,
					fixedDiscount: undefined,
					commissionType: undefined,
					content: undefined
				}

			}

		},
		created() {
			   this.getagreementType('agreementtype');
			console.log(this.agreementNo);
			console.log(this.customerJcName);
			if ("" != this.id && this.id != undefined) {
				this.getByid(this.id);
			}
		},
		methods: {
			isMoney(money) {
				var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
				if (reg.test(money)) {
					return true
				} else {
					this.$message({
						message: '请输入数字',
						type: 'error'
					})

				}
			},
			getByid(id) {
				this.$http({
					url: this.$http.adornUrl(
						`/hotel/agreement-customer/getbyid/` + id
					),
					method: "post",

				}).then(({
					data
				}) => {

					this.form = data.page;
				});


			},
			checkTime(i) {

				if (i < 10) {

					i = '0' + i

				}

				return i

			},

      getagreementType(type){

      			this.$http({
      			  url: this.$http.adornUrl('/hotel/thotelagreementtype/list'),
      			  method: 'get',
      			  params: this.$http.adornParams({
      			    page: 1,
      			    limit: 999,
      			    type:type
      			  })
      			}).then(({ data }) => {

                if(type=='agreementtype'){
                  this.agreementtype = data.page.list;
                  if(!this.id){
                    if(this.agreementtype.length > 0){
                      this.form.type = this.agreementtype[0].id
                    }
                  }
                }

      			});
      },
			// 表单提交
			dataFormSubmit() {

				this.form.agreementId = this.mainid;
				this.$refs["form"].validate(valid => {
					if (valid) {
						this.$http({
							url: this.$http.adornUrl(
								`/hotel/agreement-customer/${!this.form.id ? "save" : "update"}`
							),
							method: "post",
							data: this.form
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								this.$message({
									message: "操作成功",
									type: "success",
									duration: 1500,
									onClose: () => {
										this.cancelReturn();
									}
								});
							} else {
								this.$message.error(data.msg);
							}
						});
					}
				});
			}
		}

	}
</script>

<style>
  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      background: #d3dce6;
    }
    .bg-purple-light {
      background: #e5e9f2;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
